<template>
  <div class="profile-box">
    <VanNoticeBar
      left-icon="volume-o"
      :scrollable="false"
      style="width: 100%; opacity: 0.8"
    >
      <VanSwipe
        vertical
        class="notice-swipe"
        :autoplay="3000"
        :touchable="false"
        :show-indicators="false"
        style="width: 350px; text-align: center"
      >
        <VanSwipeItem>医院提示：</VanSwipeItem>
        <VanSwipeItem>请保管好自己的账号信息</VanSwipeItem>
        <VanSwipeItem>不要轻信身边陌生人刷单</VanSwipeItem>
      </VanSwipe>
    </VanNoticeBar>
    <!-- 主题图片 -->
    <div id="app" style="margin: 0 auto 0">
      <img src="./logo.png" style="width: 200px" />
    </div>
    <!-- 挂号订单记录,体检预约记录,本地服务,文章收藏,修改手机号 -->
    <div
      style="
        width: 100%;
        font-size: 20px;
        background-color: white;
        opacity: 0.5;
      "
    >
      <div
        style="
          display: flex;
          padding: 20px;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          border-bottom: 1px solid #fff;
          justify-content: space-between;
        "
      >
        <span>挂号订单记录</span>
        <span>></span>
      </div>
      <div
        style="
          display: flex;
          border-bottom: 1px solid #fff;
          padding: 20px;
          justify-content: space-between;
        "
      >
        <span>体检预约记录</span>
        <span>></span>
      </div>
      <div
        style="
          display: flex;
          border-bottom: 1px solid #fff;
          padding: 20px;
          justify-content: space-between;
        "
      >
        <span>本地服务</span>
        <span>></span>
      </div>
      <div
        style="
          border-bottom: 1px solid #fff;
          padding: 20px;
          display: flex;
          justify-content: space-between;
        "
      >
        <span>文章收藏</span>
        <span>></span>
      </div>
      <div
        @click="$router.push(`/xinxi/${id}`)"
        style="display: flex; padding: 20px; justify-content: space-between"
      >
        <span>修改个人信息</span>
        <span>></span>
      </div>
    </div>
    <div style="height: 110px"></div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { useStore } from "vuex";
const store = useStore();
const router = useRouter();
const id = store.state.u_id;
// onMounted(() => {
//   let params = { u_id: u_id, u_name: u_name, u_phone, u_card, u_pwd };
// });
</script>

<style scoped>
/*无限旋转动画*/

@keyframes changDeg {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#app {
  width: 200px;
  animation: changDeg 5s linear 0.2s infinite;
}
.profile-box {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #0c3662 0%, #dee3eb 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.notice-swipe {
  height: 40px;
  line-height: 40px;
}
</style>
